<template>
	<div>
		<el-button class="addBtn" type="primary" @click="dialogFormVisible = true">新增</el-button>
		<el-table :data="logisticsData" style="width: 100%">
			<el-table-column label="快递公司编号" width="700">
				<template slot-scope="scope">
					<span size="medium">{{ scope.row.cpynumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="快递公司名称" width="700">
				<template slot-scope="scope">
					<span>{{ scope.row.company }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini"
						@click="handleEdit(scope.$index, scope.row)"></el-button>
					<el-button type="danger" size="mini" icon="el-icon-delete"
						@click="handleDelete(scope.$index, scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="新增" :visible.sync="dialogFormVisible" style="width: 40%; margin: 0 auto;"
			:before-close="handleClose">
			<el-form :model="form" ref="form" v-if="Close">
				<el-form-item label="快递公司编号" :label-width="formLabelWidth">
					<el-input v-model="form.cpynumber" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="快递公司名称" :label-width="formLabelWidth">
					<el-input v-model="form.company" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Close">取 消</el-button>
				<el-button type="primary" @click="addLogistics">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑" :visible.sync="dialogFormVisible1" style="width: 40%; margin: 0 auto;"
			:before-close="handleClose">
			<el-form :model="form" ref="form" v-if="Close">
				<el-form-item label="快递公司编号" :label-width="formLabelWidth">
					<el-input v-model="form.cpynumber" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="快递公司名称" :label-width="formLabelWidth">
					<el-input v-model="form.company" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Close">取 消</el-button>
				<el-button type="primary" @click="updateLogistics">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import logisticsApi from "@/api/logistics.js"
	export default {
		data() {
			return {
				logisticsData: [],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				formLabelWidth: '100px',
				form: {
					id: "",
					company: "",
					cpynumber: ""
				}
			}
		},
		methods: {
			async queryLogisticsAll() {
				const res = await logisticsApi.queryLogisticsAll("/ZnLogistics/ZnLogisticsAll");
				if (res.code == 200) {
					this.logisticsData = res.data;
				}
			},
			async addLogistics() {
				const res = await logisticsApi.addLogistics("/ZnLogistics/addLogistics", {
					company: this.form.company,
					cpynumber: this.form.cpynumber
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.queryLogisticsAll();
					this.$notify({
						title: '成功',
						message: '新增成功!',
						type: 'success',
						offset: 100
					});
				}

			},
			async updateLogistics() {
				const res = await logisticsApi.updateLogistics("/ZnLogistics/updateLogistics", {
					id: this.form.id,
					company: this.form.company,
					cpynumber: this.form.cpynumber
				});
				if (res.code == 200) {
					this.dialogFormVisible1 = false;
					this.queryLogisticsAll();
					this.$notify({
						title: '成功',
						message: '编辑成功!',
						type: 'success',
						offset: 100
					});
				}
			},
			async deleteLogistics(row) {
				const res = await logisticsApi.deleteLogistics("/ZnLogistics/deleteLogistics/" + row.id);
				this.queryLogisticsAll();
			},
			handleEdit(index, row) { //编辑点击事件
				this.dialogFormVisible = true;
				this.form = JSON.parse(JSON.stringify(row));
			},
			handleDelete(index, row) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteLogistics(row),
						this.$notify({
							title: '成功',
							message: '已成功删除!',
							type: 'success',
							offset: 100
						});
				}).catch(() => {
					this.$notify({
						title: '已取消',
						message: '已取消删除!',
						type: 'info',
						offset: 100
					});
				});
			},
			handleClose() {
				this.dialogFormVisible = false;
				this.form = {}
			},
			Close() {
				this.dialogFormVisible = false;
				this.$nextTick(() => {
					this.form = {}
				})
			},
		},
		created() {
			this.queryLogisticsAll();
		}
	}
</script>

<style lang="scss" scoped>
	.addBtn {
		margin: 30px 0 10px 30px;
	}
</style>